<template>
	<view class="content">
		<nav-bars backState="1000" :bgColor="navBackground" fontColor="#000" title="礼品包"></nav-bars>
		<view class="header-top">
			<!-- 切换 -->
			<view class="tab-switch layout-sidebar">
				<view :class="[tabIndex===1?'tab-a tabBottom':'tab-a']" @click="tabSwitch(1)">
					我的礼包
					<text></text>
				</view>
				<view :class="[tabIndex===2?'tab-b tabBottom':'tab-b']" @click="tabSwitch(2)">
					我的分销
					<text></text>
				</view>
			</view>
			<!-- 切换 -->
			<view class="msg layout-sidebar" v-if="tabIndex===1">
				<view class="sidebar_a">
					<image :src="imageSrc+'/static/activity/gift2.png'"></image>
					<text>我的礼品包</text>
				</view>
				<view class="sidebar_b">
					<!-- <view class="iconfont icon-more"></view> -->
				</view>
			</view>
			<view class="msg layout-sidebar sharebg" v-else>
				<view class="share-user">
					<text style="font-size: 34rpx; font-weight: bold;">{{shareInfo.totalOrder||0}}</text>
					<text>成交用户</text>
				</view>
				<view class="share-money">
					<text style="font-size: 34rpx; font-weight: bold;">{{shareInfo.totalAmount||0.00}}</text>
					<text>成交金额</text>
				</view>
				<!-- <view class="withdraw" v-if="istoAuthor===0" @click="goSkips()">激活红包</view>
				<view class="withdraw" v-else-if="istoAuthor===1">红包已激活</view> -->
			</view>
		</view>
		<view class="main-list">
			<view class="wrap-box" v-if="list.length>0">
				<view class="list layout-sidebar" v-for="(item,index) in list" :key="index"
					:style="{background: 'url('+bgFrame+')',backgroundSize:'cover'}" v-if="tabIndex===1">
					<view class="sidebar_a" @click="goSkip(item.jump_addr)">
						<image :src="item.prize_img"></image>
						<!-- <text :class="[item.store_id>0?'used':'']">{{type[item.type]}}</text> -->
						<!-- <text :class="[item.store_id>0?'used msg':'msg']">{{type[item.type]}}</text> -->
					</view>
					<view class="sidebar_b" @click="goSkip(item.jump_addr)">
						<text style="color: #DFDEDE; font-weight: bold; font-size: 30rpx;"
							v-if="item.store_id>0">{{item.prize_name}}</text>
						<text style="color: #333333; font-weight: bold; font-size: 30rpx;"
							v-else>{{item.prize_name}}</text>
						<text :class="[item.store_id>0?'used':'']" v-if="item.type!=3">距离到期时间</text>
						<text :class="[item.store_id>0?'used':'']"
							v-if="item.type!=3">{{formatDate(item.end_at)}}</text>
					</view>
					<!-- 家装省钱秘籍 -->
					<view class="sidebar_c" v-if="item.type===3  && item.store_id==0"
						@click="goSkip('/pages_activity/pages/article/index?type=1&prize_id='+item.prize_id+'&prize_code='+item.prize_code)">
						<image class="expire"
							v-if="$common.getRemainderTime(date,formatDate(item.end_at))<3 && $common.getRemainderTime(date,formatDate(item.end_at))>=0"
							:src="imageSrc+'/static/activity/expire.png'"></image>
						去查看
					</view>
					<!-- 优惠券 -->
					<view class="sidebar_c" v-if="item.type===1 && item.store_id==0"
						@click="goWriteOff(item.prize_id,item.prize_code,formatDate(item.end_at),item.prize_name,$common.getRemainderTime(date,formatDate(item.end_at)),item.remark,item)">
						<image class="expire"
							v-if="$common.getRemainderTime(date,formatDate(item.end_at))<3 && $common.getRemainderTime(date,formatDate(item.end_at))>=0"
							:src="imageSrc+'/static/activity/expire.png'"></image>
						<text v-if="$common.getRemainderTime(date,formatDate(item.end_at))<0">已过期</text>
						<text v-else>去使用</text>
					</view>
					 <!-- 核销 -->
					<view class="sidebar_c" v-if="item.type===0 && item.store_id==0"
						@click="goWriteOff(item.prize_id,item.prize_code,formatDate(item.end_at),item.prize_name,$common.getRemainderTime(date,formatDate(item.end_at)),item.remark,item)">
						<image class="expire"
							v-if="$common.getRemainderTime(date,formatDate(item.end_at))<3 && $common.getRemainderTime(date,formatDate(item.end_at))>=0"
							:src="imageSrc+'/static/activity/expire.png'"></image>
						<text v-if="$common.getRemainderTime(date,formatDate(item.end_at))<0">已过期</text>
						<text v-else>去使用</text>
					</view>
					<!-- 实物 -->
					<view class="sidebar_c" v-if="item.type===2 && item.store_id==0"
						@click="goWriteOff(item.prize_id,item.prize_code,formatDate(item.end_at),item.prize_name,$common.getRemainderTime(date,formatDate(item.end_at)),item.remark,item)">
						<image class="expire"
							v-if="$common.getRemainderTime(date,formatDate(item.end_at))<3 && $common.getRemainderTime(date,formatDate(item.end_at))>=0"
							:src="imageSrc+'/static/activity/expire.png'"></image>
						<text v-if="$common.getRemainderTime(date,formatDate(item.end_at))<0">已过期</text>
						<text v-else>去使用</text>
					</view>
					<!-- 直播入场券 -->
					<view class="sidebar_c" v-if="item.type==4" @click="GoLiveRoom(item.rel_id)">
						<image class="expire"
							v-if="$common.getRemainderTime(date,formatDate(item.end_at))<3 && $common.getRemainderTime(date,formatDate(item.end_at))>=0"
							:src="imageSrc+'/static/activity/expire.png'"></image>
						去查看
					</view>
					<view class="write-off sidebar_c" v-if="item.store_id>0 && item.jump_addr!=''">
						<text @click="goSkip(item.jump_addr)">活动详情</text>
						<image :src="imageSrc+'/static/activity/used.png'" class="written-image"></image>
					</view>
					<view class="write-off" v-if="item.store_id>0 && item.jump_addr==''">
						<image :src="imageSrc+'/static/activity/used.png'"></image>
					</view>
				</view>
				<!-- 我的分享 -->
				<view class="list layout-sidebar" v-for="(items,indexx) in list" :key="indexx"
					style="height: 108rpx; margin-top:40rpx;" v-if="tabIndex===2">
					<view class="otder_a">
						<text style="font-weight: bold;margin-right: 6rpx;">订单编号:</text>
						<text style="color:#cb9436;">{{items.order_id}}</text>

						<text style="display: block;">{{formatDate(items.payed_at)}}</text>
					</view>
					<view class="shareMoney">
						<text>+{{items.amount}}</text>
					</view>
				</view>
			</view>
			<view class="notList" v-else>
				<image :src="`${imageSrc}/static/constr/notList.png`" mode=""></image>
				空空如也
			</view>
		</view>
		<!-- 核销弹窗 -->
		<view class="wrap-modal" :class="[is_show ? 'show' : 'cu-modal']" @click.stop="is_show = false">
			<view class="content-modal" @click.stop="">
				<view class="box">
					<view class="title">
						{{prize_name}}
					</view>
					<view class="row-text" style="margin-top: 10rpx;font-size: 26rpx;color: #8A8583;">
						可凭此码兑换{{prize_name}}
					</view>
					<scroll-view scroll-y="true" class="row-text rule-dateils">
						<u-parse :html="remark"></u-parse>
					</scroll-view>
					<view class="row-text time">
						有效期至： {{end_at}}
					</view>
					<view class="qrcode">
						<image :src="code"></image>
						<text>序列号：{{prize_code}}</text>
					</view>
				</view>
			</view>
			<image class="close" :src="imageSrc+'/static/activity/close.png'" @click="closePopup"></image>
		</view>
		<!-- 核销弹窗 -->
	</view>
</template>

<script>
	var t;
	import activity from '@/service/activity.js'
	import service_player from '@/service/player.js';
	export default {
		data() {
			return {
				navBackground: '',
				imageSrc: this.$static,
				writeOff: 0, //1已核销
				bgFrame: this.$static + '/static/activity/frame.png',
				is_show: false, //显示状态
				list: [],
				code: '', //核销二维码
				prize_code: '', //核销码,
				end_at: '',
				prize_name: '',
				date: '',
				// 是否滑动到底部
				isScrollBtm: true,
				isScrollFlag: false,
				type: {
					0: '促销券',
					1: '线上优惠卷',
					2: '商品',
					3: '家装秘籍',
				},
				pagesize: 10,
				page: 1,
				tabIndex: 1,
				shareInfo: {}, //分享统计信息
				programMobile: '',
				remark: '', //奖品活动规则
			}
		},
		onLoad() {
			this.$utils.getUrl()
			this.getList();
			var day = new Date();
			day.setTime(day.getTime());
			var today = day.getFullYear() + "-" + (day.getMonth() + 1) + "-" + day.getDate();
			this.date = today;
		},
		onShow() {
			let app = getApp();
			this.programMobile = app.globalData.programMobile
			//授权验证
			this.getToAuthor(app.globalData.programMobile);
		},
		onReachBottom() {
			this.isScrollBtm = true;
			this.isScrollFlag = true;
			setTimeout(() => {
				this.isScrollFlag = false;
			}, 500);
			this.page++
			if (this.tabIndex === 2) {
				this.getShareRecord();
			} else {
				this.getList()
			}

		},
		methods: {
			goSkip(url) {
				this.$common.navigateTo(url);
			},
			goSkips() {
				let user_id = uni.getStorageSync('userId')
				uni.navigateToMiniProgram({
					appId: 'wxd3d1e9d7ee8553f9',
					path: '/pages_activity/pages/giftBag/redBao/index',
					extraData: {
						user_id: user_id,
					},
					success(res) {
						console.log(res)
						// 打开成功
					}
				})
			},
			goTabBar(url) {
				uni.switchTab({
					url: url
				});
			},
			//核销
			goWriteOff(id, code, end_at, prize_name, expire, remark,item) {
				if (expire < 0) {
					this.$common.errorToShow('礼品已过期');
					return false;
				}
				this.is_show = true;
				this.getprizeWriteOff(id, code, end_at, prize_name, expire, remark,item);
			},
			closePopup() {
				this.is_show = false;
				clearTimeout(t)
			},
			getList() {
				uni.showLoading()
				activity.activityRecord({
						channel: '1,2',
						page: this.page,
						pagesize: this.pagesize,
						user_id: uni.getStorageSync('userId'),
					})
					.then(res => {
						uni.hideLoading()
						let _this = this;
						if (res.code == 1) {
							//	_this.list = res.data.data;
							let data = res.data.data;
							for (var i = 0; i < data.length; i++) {
								_this.list.push(data[i]); // 加载的数据追加在上一页后面
							}
						} else {
							//_this.$common.errorToShow(res.msg)
						}
					})
					.catch(err => {
						uni.hideLoading()
					})
			},
			//奖品核销
			getprizeWriteOff(id, code, end_at, prize_name, expire, remark,item) {
				uni.showLoading()
				activity.prizeWriteOff({
						prize_id: id,
						prize_code: code,
						user_id: uni.getStorageSync('userId'),
					})
					.then(res => {
						uni.hideLoading()
						let _this = this;
						if (res.code == 1 || res.code == 0) {
							_this.code = res.msg;
							_this.prize_code = code;
							_this.end_at = end_at;
							_this.prize_name = prize_name;
							_this.remark = remark;
							t = setTimeout(function() {
								_this.writeOffStatus(code,item);
							}, 3000);

						} else {
							_this.$common.errorToShow(res.msg)
						}
					})
					.catch(err => {
						uni.hideLoading()
					})
			},
			formatDate(value) {
				let date = new Date(parseInt(value) * 1000);
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				m = m < 10 ? "0" + m : m;
				let d = date.getDate();
				d = d < 10 ? "0" + d : d;
				let h = date.getHours();
				h = h < 10 ? "0" + h : h;
				let minute = date.getMinutes();
				let second = date.getSeconds();
				minute = minute < 10 ? "0" + minute : minute;
				second = second < 10 ? "0" + second : second;
				return y + "-" + m + "-" + d;
			},
			//核销验证
			writeOffStatus(code,item) {
				activity.prizeValid({
						prize_code: code,
						//user_id: uni.getStorageSync('userId'),
					})
					.then(res => {
						let _this = this;
						if (res.code == 1) {
							_this.$common.errorToShow('核销成功');
							clearTimeout(t)
							if(item.verif_conf_status==1){
								_this.is_show = false;
								_this.page = 1
								_this.list = []
								_this.getList();
								setTimeout(function() {
									//跳转抽奖页
									_this.goSkip(item.jump_addr);
								}, 1500);
							}else{
								setTimeout(function() {
									_this.is_show = false;
									_this.page = 1
									_this.list = []
									_this.getList();
								}, 2000);
							}
						} else {
							t = setTimeout(function() {
								_this.writeOffStatus(code,item);
							}, 3000);
							//_this.$common.errorToShow(res.msg)
						}
					})
					.catch(err => {

					})
			},
			//tab切换
			tabSwitch(e) {
				this.tabIndex = e;
				this.list = [];
				this.page = 1;
				if (e === 2) {
					this.getShareRecord();
					this.getShareStatistics();
				} else {
					this.getList();
				}
			},
			//分享记录
			getShareRecord() {
				activity.giftShareRecord({
						page: this.page,
						pagesize: this.pagesize,
						//share_user_id: 1047,
						share_user_id: uni.getStorageSync('userId'),
					})
					.then(res => {
						let _this = this;
						if (res.code == 1) {
							let data = res.data.records;
							for (var i = 0; i < data.length; i++) {
								_this.list.push(data[i]); // 加载的数据追加在上一页后面
							}
						} else {
							//_this.$common.errorToShow(res.msg)
						}
					})
					.catch(err => {

					})
			},
			//分享统计
			getShareStatistics() {
				activity.shareStatistics({
						share_user_id: uni.getStorageSync('userId'),
					})
					.then(res => {
						if (res.code == 1) {
							let data = res.data;
							this.shareInfo = data;
						} else {
							this.shareInfo = {};
							//_this.$common.errorToShow(res.msg)
						}
					})
					.catch(err => {

					})
			},
			getToAuthor(programMobile) {
				let user_id = uni.getStorageSync('userId');
				activity.toAuthor({
						mobile: programMobile ? programMobile : user_id,
					})
					.then(res => {
						if (res.code == 1) {
							//this.istoAuthor=1;
						} else {
							
						}
					})
					.catch(err => {

					})
			},
			//直播跳转
			GoLiveRoom(qy_living_id) {
				var that = this;
				var openid = uni.getStorageSync('nowOpenid');
				let params = {
					living_id:qy_living_id,
					openid: openid
				};
				service_player.getQYLiveCode(params).then(res => {
							if (res.code == 1) {
								let LiveCode = res.data.living_code;
									// 直播中,预约中
									uni.navigateToMiniProgram({
										appId: 'wx7424030d69bde86e',
										path: 'pages/watch/index?living_code=' + LiveCode,
										success(res) {
											// 打开成功
										}
									});
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
							}
						})
						.catch(err => {
							uni.showToast({
								title: err,
								icon: 'none'
							});
						});
				
			}
		},
		watch: {
			is_show: function(val) {
				if (val === false) {
					clearTimeout(t)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.layout-sidebar {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.header-top {
			.msg {
				width: 94%;
				margin: 10rpx auto;
				height: 106rpx;
				background: linear-gradient(-79deg, #EFE0C0, #DEBF92);
				box-shadow: 0px 2px 14px 0px #F1F1F1;
				border-radius: 8px;

				.sidebar_a {
					display: flex;
					align-items: center;

					image {
						width: 32rpx;
						height: 32rpx;
						margin: 0 20rpx 0 20rpx;
					}

					text {
						width: auto;
						height: 32rpx;
						font-size: 26rpx;
						font-weight: bold;
						color: #42311A;
						line-height: 32rpx;
					}
				}

				.sidebar_b {
					margin-right: 24rpx;

				}
			}

			.tab-switch {
				width: 94%;
				margin: auto;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;

				.tab-a {
					width: 50%;
					position: relative;

				}

				.tab-b {
					width: 50%;
					position: relative;
				}

				.tabBottom {
					text {
						display: block;
						position: absolute;
						bottom: 0;
						left: 50%;
						margin-left: -50rpx;
						width: 100rpx;
						height: 5rpx;
						background: #F0AD4E;
						border-radius: 2rpx;
					}
				}
			}

			.share-user {
				width: 200rpx;
				text-align: center;

				text {
					width: 100%;
					display: block;

				}
			}

			.share-money {
				width: 300rpx;
				text-align: center;

				text {
					width: 100%;
					display: block;

				}
			}

			.withdraw {
				width: 160rpx;
				height: 68rpx;
				line-height: 68rpx;
				border-radius: 10rpx;
				background-color: #B7843B;
				font-size: 26rpx;
				margin-right: 18rpx;
				text-align: center;
				color: #fff;
			}
		}

		.main-list {
			.wrap-box {
				width: 94%;
				margin: auto;

				.list {
					width: 100%;
					height: 190rpx;
					margin-bottom: 20rpx;

					.sidebar_a {
						width: 190rpx;
						text-align: center;
						margin: -8rpx 18rpx 0 0;

						image {
							width: 140rpx;
							height: 140rpx;
							margin: auto;
							border-radius: 50%;
						}

						text {
							font-size: 28rpx;
							font-weight: bold;
							color: #B7843B;
							display: block;
						}

						text.msg {
							font-size: 22rpx;
							color: #B7843B;

						}
					}

					.sidebar_b {
						width: 358rpx;
						font-size: 24rpx;
						text-align: left;
						margin-right: auto;

						text {
							margin-bottom: 10rpx;
							width: 100%;
							display: block;
							color: #949494;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;

						}
					}

					.otder_a {
						width: 50%;
						font-size: 24rpx;
						text-align: left;
						margin-right: auto;
						margin-left: 20rpx;

						text {
							margin-bottom: 10rpx;
							width: 100%;
							overflow: hidden;
							line-height: 42rpx;
							text-overflow: ellipsis;
							white-space: nowrap;

						}

					}

					.sidebar_c {
						width: 148rpx;
						height: 64rpx;
						background: linear-gradient(42deg, #D39041, #E8BB6A);
						border-radius: 29rpx;
						text-align: center;
						color: #fff;
						line-height: 64rpx;
						margin-right: 10rpx;

						.expire {
							width: 109rpx;
							height: 72rpx;
							position: absolute;
							margin-top: -66rpx;
							right: 16rpx;
						}
					}

					.shareMoney {
						width: 148rpx;
						height: 64rpx;
						text-align: center;
						color: #cb9436;
						line-height: 64rpx;
						margin-right: 10rpx;
					}

					.write-off {
						image {
							width: 135rpx;
							height: 136rpx;
						}
						.written-image{
							position: absolute;
							margin-top:-12%;
							left: 55%;
							z-index: 100;
						}
					}
				}

				.used {
					color: #C7C6C4 !important;
				}
			}
		}

		.show {
			display: block;
		}

		.cu-modal {
			display: none;
		}

		.wrap-modal {

			position: fixed;
			bottom: 0;
			background: rgba(0, 0, 0, 0.6);
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 500;

			.content-modal {
				width: 92%;
				height: auto;
				margin: 220rpx auto;
				padding-bottom: 34rpx;
				background-color: #F5F5F5;
				border-radius: 20rpx;
				margin-bottom: 68rpx;

				.box {
					padding: 33rpx;

					.title {
						// height: 74rpx;
						margin-top: 18rpx;
						font-size: 40rpx;
						font-weight: bold;
						color: #201B18;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.row-text {
						// height: 42rpx;
						color: #333333;
						font-size: 26rpx;
					}

					.rule-dateils {
						max-height: 410rpx;
						margin: 10rpx 0 10rpx 0;
					}

					.time {
						color: #FF2C43;
						height: 50rpx;
						// height: 74rpx;
						border-bottom: 1px solid #D7D7D7;
					}

					.qrcode {
						margin-top: 48rpx;
						text-align: center;

						image {
							width: 375rpx;
							height: 374rpx;
							margin: auto;
						}

						text {
							color: #201B18;
							line-height: 118rpx;
						}
					}
				}

			}

			.close {
				width: 38rpx;
				height: 38rpx;
				margin: auto;
			}
		}

		// 没有数据
		.notList {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			height: 400rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 426rpx;

			image {
				width: 426rpx;
				height: 356rpx;
				margin-bottom: 40rpx;
			}

			font:500 40rpx/56rpx PingFang SC;
			color: #333;
		}
	}
</style>
